<template>  
    <view class="tabbar-container">  
        <block>  
            <view class="tabbar-item" v-for="(item,index) in tabbarList" :class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">  
                <view class="item-top">  
						<image :style="{width: item.centerItem ? '40%' : '100%',height: item.centerItem ? '40%' : '100%'}" :src="currentItem==item.id?item.selectIcon:item.icon"></image>
						<text style="color: #F2D924;margin-top: 15rpx;" v-if="item.centerItem">党建</text>
                </view>  
                <view class="item-bottom" :class="[currentItem==item.id ? 'item-active' : '']">  
                    <text>{{item.text}}</text>  
                </view>  
            </view>  
        </block>  

    </view>  
</template>  

<script>  
    export default {  
        props:{  
            currentPage: {  
                type: Number,  
                default: 0  
            }  
        },  
        data() {  
            return {  
                currentItem: 0,
                tabbarList: [  
                    {  
                        id: 0,  
                        path: "/pages/home/home",  
                        icon: "/static/images/home.png",  
                        selectIcon: "/static/images/home-blue.png",  
                        text: "首页",  
                        centerItem: false  
                    },{  
                        id: 1,  
                        path: "/pages/party/index",
                        icon: "/static/images/party.png",  
                        selectIcon: "/static/images/party.png",  
                        text: "",
                        centerItem: true  
                    } ,{  
                        id: 2,  
                        path: "/pages/me/me",  
                        icon: "/static/images/me.png",  
                        selectIcon: "/static/images/me-blue.png",  
                        text: "我的",  
                        centerItem: false  
                    }
                ]  

            };  
        },  
        mounted(){  
            this.currentItem = this.currentPage;  
            uni.hideTabBar();  
        },  
        methods: {  
            changeItem(item) {
				if(item.id == 1) {
					uni.navigateTo({
						url: item.path
					})
				} else {
					uni.switchTab({
					    url: item.path  
					});
				}
            }  
        }  
    }  
</script>  
<style>  
        view{  
               padding: 0;  
               margin: 0;  
               box-sizing: border-box;  
        }  
    .tabbar-container{  
        position: fixed;  
        bottom: 0;  
        left: 0;  
        width: 100%;  
        height: 110rpx;  
        box-shadow: 0 0 5px #999;  
        display: flex;  
		justify-content: space-around;
        align-items: center;  
        padding: 5rpx 0;  
        color: #888888;
    }  
    .tabbar-container .tabbar-item{  
        width: 20%;  
        height: 100rpx;  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
        text-align: center;  
    }  
    .tabbar-container .item-active{  
        color: #477EDA;  
    }  
    .tabbar-container .center-item{  
        display: block;  
        position: relative;  
    }  
    .tabbar-container .tabbar-item .item-top{  
        width: 70rpx;  
        height: 70rpx;  
        padding: 10rpx;  
    }  
    .tabbar-container .center-item .item-top{  
        flex-shrink: 0;  
        width: 140rpx;  
        height: 140rpx;  
        position: absolute;  
        top: -75rpx;  
        left: calc(50% - 75rpx);  
        border-radius: 50%;  
        box-shadow: 0 0 5px #999;  
        background-color: rgb(225, 15, 15);  
		display: flex;
		flex-direction: column;
		align-items: center;
    }  
    .tabbar-container .tabbar-item .item-top image{  
        width: 100%;  
        height: 100%;  
    }  
    .tabbar-container .tabbar-item .item-bottom{  
        font-size: 28rpx;  
        width: 100%;  
    }  
    .tabbar-container .center-item .item-bottom{  
        position: absolute;  
        bottom: 5rpx;  
    }
</style>  